<template>
  <div>
    <div class="task-list justify-content-center">
      <div class="title align-item-center">
        <span class="fs28 color161D2E">任务列表</span>
        <div class="btn justify-content-center" @click="getListData(1)">
          <img class="refresh" src="../assets/images/icon-refresh.png" />
          <span class="fs18 color505971">刷新</span>
        </div>
      </div>
      <span class="fs18 color505971">数据更新时间：{{ refreshTime }}</span>
    </div>
    <div class="operation justify-content-between">
      <div class="tabs flex">
        <div
          v-for="(item, index) in tabsData"
          :key="index"
          class="tab"
          :class="item.selected ? 'active' : ''"
          @click="switchTab(index)"
        >
          {{ item.status }}<span>({{ item.total }})</span>
        </div>
      </div>
      <div class="align-item-center">
        <div class="add-btn justify-content-center" @click="showModel(1)">
          <img src="../assets/images/icon-add.png" />
          <span class="fs22 colorFFF">新增任务</span>
        </div>
      </div>
    </div>
    <TaskItem
      @showModel="showModel"
      @pageQuery="pageQuery"
      @pageSizeQuery="pageSizeQuery"
      v-loading="loading"
      :viewData="taskListData"
      :listData="listData"
    ></TaskItem>
    <TaskAdd v-if="showAdd" :data="editData" @cancel="cancelAdd"></TaskAdd>
    <TaskDel v-if="showDel" :id="delId" @cancel="cancelDel"></TaskDel>
    <FactoryNumber v-if="showFn" :id="delId" :taskName="taskName" @cancel="cancelFn"></FactoryNumber>
  </div>
</template>

<script>
import TaskItem from "@/components/TaskItem";
import TaskAdd from "@/components/TaskAdd";
import TaskDel from "@/components/TaskDel";
import FactoryNumber from "@/components/FactoryNumber";
import Bus from "@/assets/js/bus.js";
export default {
  name: "TaskList",
  components: { TaskItem, TaskAdd, TaskDel, FactoryNumber },
  data() {
    return {
      iconMore: require("../assets/images/icon-more.png"),
      tabsData: [
        {
          status: "全部",
          total: 0,
          selected: true,
        },
        {
          status: "已完成",
          total: 0,
          selected: false,
        },
        {
          status: "进行中",
          total: 0,
          selected: false,
        },
      ],
      refreshTime: "", //刷新时间
      showAdd: false, //显示新增/修改弹窗
      showDel: false, //显示删除弹窗
      showFn: false,
      editData: {}, //编辑数据
      delId: "", //删除数据id
      taskName: "",
      keyWords: "", //搜索关键词
      pageNum: 1, //总览列表页数
      pageSize: 5, //总览列表页码
      status: "", //tab状态 DOING进行中 COMPLETE已完成
      loading: false, //显示加载中动画
      taskListData: null, //任务列表数据
      listData: [], //列表数据
    };
  },
  created() {
    let _this = this;
    _this.getListData();
    _this.getNowTime();
    Bus.$on("search", (val) => {
      _this.keyWords = val;
      _this.pageNum = 1,
      _this.getListData();
    });
    Bus.$on("refreshTaskList", () => {
      _this.getListData(2);
    });
  },
  methods: {
    /**
     * 点击切换tab
     * @param {Number} index - 所点击tab下标
     */
    switchTab(index) {
      this.tabsData.map((item) => {
        item.selected = false;
        return item;
      });
      let temp = this.tabsData[index];
      temp.selected = true;
      this.$set(this.tabsData, index, temp);
      this.pageNum = 1;
      if (index == 1) {
        this.status = "COMP";
      } else if (index == 2) {
        this.status = "DOING";
      } else {
        this.status = "";
      }
      this.getListData();
    },
    // 获取当前时间
    getNowTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let dateTime = yy + "年" + mm + "月" + dd + "日 " + hh + ":" + mf;
      this.refreshTime = dateTime;
    },
    /**
     * 显示新增/编辑/删除弹窗
     * @param {Number} type - 1新增/编辑 2删除
     * @param {Object} row - 操作数据
     */
    showModel(type, row) {
      if (type == 1) {
        this.editData = row ? row : {};
        this.showAdd = true;
      } else if (type == 2) {
        this.showDel = true;
        this.delId = row.id;
      } else if (type == 3) {
        this.showFn = true;
        this.delId = row.id;
        this.taskName = row.taskName
      }
    },
    /**
     * 关闭型号弹窗
     * @param {Number} refresh - 是否刷新列表 1是
     */
    cancelAdd(refresh) {
      if (refresh) this.getListData();
      this.showAdd = false;
    },
    /**
     * 关闭删除型号弹窗
     * @param {Number} refresh - 是否刷新列表 1是
     */
    cancelDel(refresh) {
      if (refresh == 1) this.getListData();
      this.showDel = false;
    },
    cancelFn() {
      this.showFn = false;
    },
    /**
     * 获取总览数据
     * @param {Number} refresh - 1点击刷新按钮
     */
    getListData(refresh) {
      let _this = this;
      let params = {
        pageNum: _this.pageNum,
        pageSize: _this.pageSize,
        status: _this.status,
        keyWords: _this.keyWords,
      };
      if (refresh == 1) _this.getNowTime();
      _this.tabsData.map((item, index) => {
        item.total = 0;
        return item;
      });
      _this.listData = [];
      _this.loading = refresh == 2 ? false : true;
      _this.axios
        .overview(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.tabsData.map((item, index) => {
                if (index == 0) {
                    item.total = res.data.allNum;
                } else if (index == 1) {
                    item.total = res.data.compNum;
                } else {
                    item.total = res.data.doingNum;
                }
                return item;
            })
            _this.taskListData = res.data;
            _this.listData = res.data.pageInfo.list.map((item, index) => {
              item.iconMoreShow = _this.iconMore;
              return item;
            });
          } else if (res.code == -1 && res.msg == '未登录') {
            location.reload()
          } else {
            _this.$message.error(res.msg)
          }
          _this.loading = false;
        })
        .catch(function (error) {
          _this.loading = false;
          _this.$message.error(error.msg);
        });
    },
    /**
     * 分页请求
     * @param {Number} pageNum - 页数
     */
    pageQuery(pageNum) {
      this.pageNum = pageNum;
      this.getListData();
    },
    pageSizeQuery(pageSize) {
      this.pageSize = pageSize;
      this.getListData()
    }
  },
};
</script>

<style scoped lang='less'>
.task-list {
  width: 100%;
  height: .51rem;
  line-height: .51rem;
  position: relative;
  .title {
    position: absolute;
    left: .98rem;
    .btn {
      width: .84rem;
      height: .34rem;
      line-height: .34rem;
      text-align: center;
      margin-left: 26px;
      border: 1px solid #d0d6e3;
      background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
      border-radius: .03rem;
      cursor: pointer;
      .refresh {
        width: .19rem;
        height: .18rem;
        margin-right: .05rem;
      }
    }
  }
}
.operation {
  width: 100%;
  height: .58rem;
  background: #f4f5f8;
  border: 1px solid #d0d6e3;
  padding: 0 1rem;
  .tabs {
    height: 100%;
    .tab {
      min-width: 1.03rem;
      height: 100%;
      line-height: .58rem;
      text-align: center;
      position: relative;
      font-size: .24rem;
      color: #505971;
      margin-right: .5rem;
      cursor: pointer;
    }
    .tab.active {
      color: #161d2e;
      span {
        color: #285fe3;
      }
    }
    .tab.active:after {
      display: block;
      content: "";
      width: 1.03rem;
      height: .04rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      background-color: #285fe3;
    }
  }
  .add-btn {
    width: 1.58rem;
    height: .4rem;
    background: linear-gradient(0deg, #01a96a 0%, #00c37a 100%);
    border-radius: .03rem;
    cursor: pointer;
    img {
      width: .23rem;
      height: .23rem;
      margin-right: .06rem;
    }
  }
}
</style>
